<template>
    <view class="container" :style="themeColor">
        <view class="main">
            <view class="card-cell type-cell">
                <text class="cell-title">选择反馈类型</text>
                <view class="types">
                    <text
                        class="btn"
                        :class="selectType.TypeCode == item.TypeCode ? 'btn-success-hollow' : 'btn-gray'"
                        v-for="(item, index) in items"
                        :key="index"
                        @click="select(item)"
                        >{{ item.TypeName }}</text
                    >
                </view>
            </view>
            <view class="card-cell type-cell">
                <text class="cell-title">描述问题</text>
                <textarea
                    class="textarea"
                    v-model="value"
                    placeholder="清楚描述出现的问题，能让小二更快的帮助您解决问题哦"></textarea>
            </view>
            <view class="card-cell type-cell" v-for="(item, formIndex) in imgForms" :key="formIndex">
                <text class="cell-title">上传图片(选填)</text>
                <view class="img-cell">
                    <view class="">
                        <view class="add-img" @tap="chooseImage(item.ValueType)">
                            <uni-icons type="camera" size="80"></uni-icons>
                            <text>添加图片</text>
                        </view>
                    </view>
                    <block v-if="item.ValueType == 7" v-for="(image, index) in imageListOne" :key="index">
                        <view class="img-item">
                            <image
                                class="img"
                                :src="easyGetImgUrl(image)"
                                mode="aspectFill"
                                :data-src="easyGetImgUrl(image)"
                                @tap="previewImageOne"></image>
                            <view @click="delOne(index)">
                                <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"></uni-icons>
                            </view>
                        </view>
                    </block>
                    <block v-if="item.ValueType == 8" v-for="(image, index) in imageListMore" :key="index">
                        <view class="img-item">
                            <image
                                class="img"
                                :src="easyGetImgUrl(image)"
                                mode="aspectFill"
                                :data-src="easyGetImgUrl(image)"
                                @tap="previewImageMore"></image>
                            <view @click="delMOre(index)">
                                <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"></uni-icons>
                            </view>
                        </view>
                    </block>
                </view>
            </view>
            <view class="acton-bar">
                <button class="btn btn-success" @click="submit">提交反馈</button>
            </view>
        </view>
		<privacy-agreement></privacy-agreement>
		<uni-popup type="bottom" ref="authorizePop" background-color="#fff" :safe-area="false">
		    <view class="pop-pay-way">
		        <view class="title"><text style="padding:0;border: 0;font-size: 32rpx;color: #333;">选择图片</text></view>
		        <scroll-view scroll-y="true" class="add-pay-way-scroll">
		            <view class="pay-way">
		                <view class="pay-way-item" style="text-align: center;font-size: 30rpx;display: block;" @click="selecttype('camera')">拍照</view>
		                <view class="pay-way-item" style="text-align: center;font-size: 30rpx;display: block;" @click="selecttype('album')">从手机相册选择</view>
		            </view>
		        </scroll-view>
		        <button class="btn" style="margin:0;font-size: 30rpx;color:#666" @click="$refs.authorizePop.close()">取消</button>
		    </view>
		</uni-popup>
    </view>
</template>

<script>
import { uploadImage } from "@/service/api/file.js"
import authorizeUtils from "@/utils/authorizeUtils.js"
import { addFeedback } from "@/service/api/feedback.js"
import { GetSubFormTypeByType, GetDetailListByType } from "@/service/api/customForm.js"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
export default {
	components:{
		privacyAgreement
	},
    data() {
        return {
            items: [],
            imageListOne: [],
            imageListMore: [],
            selectType: {
                TypeCode: 0,
                TypeName: "",
            },
            customForm: [],
            imgForms: [],
            value: "",
			type:''
        }
    },
    mounted() {
        this.getSubFormTypeByType()
        this.getDetailListByType()
    },
    methods: {
        hasImgFrom(customForm) {
            let hasImg = false
            customForm.forEach((e) => {
                if (e.ValueType == 7 || e.ValueType == 8) {
                    hasImg = true
                }
            })
            return hasImg
        },
        getSubFormTypeByType() {
            GetSubFormTypeByType({}).then((res) => {
                if (res.Data && res.Data.length > 0) {
                    this.items = res.Data
                    this.selectType = {
                        TypeCode: this.items[0].TypeCode,
                        TypeName: this.items[0].TypeName,
                    }
                }
            })
        },
        getDetailListByType() {
            GetDetailListByType({}).then((res) => {
                this.imgForms = []
                if (res.Data && res.Data.length > 0) {
                    this.customForm = res.Data
                    this.customForm.forEach((e) => {
                        if (e.ValueType == 7 || e.ValueType == 8) {
                            this.imgForms.push(e)
                        }
                    })
                }
            })
        },
        //选择类型
        select(item) {
            this.selectType = {
                TypeCode: item.TypeCode,
                TypeName: item.TypeName,
            }
        },
        //预览图片
        previewImageOne(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageListOne,
            })
        },
        previewImageMore(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageListMore,
            })
        },
        //选择图片
		//#ifdef APP
		async selecttype(openType) {
			const permissionType = openType === "album" ? "android.permission.READ_EXTERNAL_STORAGE" : "android.permission.CAMERA";
			let authFlag = await authorizeUtils.showAuthTipModal(permissionType);
			if (!authFlag) return;
			this.$refs.authorizePop.close()
			    // 此处处理各自业务 如：uni.chooseImage  
				let that = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: [openType], //从相册选择
				    success: function (res) {
				        that.upLoadPicFn(res, that.type)
				    },
					fail: (fail) => {
						if ([0, 11, 12].includes(fail.code)) return;
						authorizeUtils.showManualAuth(permissionType);
					}
				})
		},
		//#endif
		//#ifdef APP
        chooseImage(type) {
			this.$refs.authorizePop.open()
			this.type = type
        },
		//#endif
		// #ifndef APP
		chooseImage(type) {
			let that = this
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ["album", "camera"], //从相册选择
				success: function (res) {
					that.upLoadPicFn(res, type)
				},
			})
		},
		// #endif
        //删除图片
        delOne(index) {
            this.imageListOne.splice(index, 1)
        },
        //删除图片
        delMOre(index) {
            this.imageListMore.splice(index, 1)
        },
        //上传图片
        upLoadPicFn(files, type) {
            let param = {
                filePath: files.tempFilePaths[0],
                formData: {},
            }
            uploadImage(param).then((e) => {
                if (e.Data) {
                    if (type == 7) {
                        this.imageListOne.push(e.Data.FullPath)
                    } else if (type == 8) {
                        this.imageListMore.push(e.Data.FullPath)
                    }
                }
            })
        },
        //提交反馈
        submit() {
            if (this.value.trim() == "") {
                this.easyToast("请描述问题")
                return
            }
            let attributes = []
            this.imgForms.forEach((e) => {
                let obj = {
                    attributeId: e.ID,
                    value: e.TypeCode == 7 ? this.imageListOne.join(",") : this.imageListMore.join(","),
                    valueType: e.TypeCode,
                }
                attributes.push(obj)
            })
            let param = {
                attributes: attributes,
                model: {
                    content: this.value,
                    feedbackType: this.selectType.TypeCode,
                    feedbackTypeName: this.selectType.TypeName,
                },
            }
            addFeedback(param).then((res) => {
                if (res.State) {
                    this.easyToast("反馈成功")
                    setTimeout((e) => {
                        this.easyGoBack()
                    }, 500)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss">
.main {
    padding: $app-page-padding;
}

.type-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .cell-title {
        display: flex;
        flex: 1;
        margin-bottom: 40rpx;
        font-weight: 600;
    }

    .types {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .btn {
            min-width: 120rpx;
            padding: 0 20rpx;
            border-radius: $border-radius-10;
            margin-bottom: 20rpx;
            margin-right: 20rpx;
        }

        &:after {
            content: " ";
            width: 48%; //这个宽度和子元素宽度一致
            height: 0;
            display: block;
        }
    }
}

.textarea {
    display: flex;
    width: 100%;
    height: 140rpx;
    font-size: $font-size-24;
    line-height: 40rpx;
}

.acton-bar {
    margin-top: 40rpx;

    .btn {
        height: 88rpx;
    }
}
</style>
